<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <title>登陆-注册</title>
    <%@include file="/pages/icon.html"%>
    <link rel="stylesheet" href="/loginAndReg/css/style.css">
</head>
<body>
<div class="cotn_principal">
    <div class="cont_centrar">
        <br>
        <span style=" color: #21b384; font-size: 28px; font-weight: bold;">${MSG_success}</span>
        <div class="cont_login">
            <%-- 外面--%>
            <div class="cont_info_log_sign_up">
                <div class="col_md_login">
                    <div class="cont_ba_opcitiy">
                        <h2><<<<<</h2>
                        <p>◑﹏◐</p>
                        <button class="btn_login" onclick="cambiar_login()">登陆</button>
                    </div>
                </div>
                <div class="col_md_sign_up">
                    <div class="cont_ba_opcitiy">
                        <h2>>>>>></h2>
                        <p>(●ˇ∀ˇ●)</p>
                        <button class="btn_sign_up" onclick="cambiar_sign_up()">注册</button>
                    </div>
                </div>
            </div>
            <%-- 背景图 --%>
            <div class="cont_back_info">
                <div class="cont_img_back_grey">
                    <img alt=""/>
                </div>
            </div>

            <div class="cont_forms">
                <div class="cont_img_back_">
                    <img alt=""/>
                </div>
                <%-- 登陆表单 --%>
                <div class="cont_form_login">
                    <%-- 登陆页返回按钮 --%>
                    <a href="javascript:void(0)" onclick="ocultar_login_sign_up()"><i
                            class="material-icons">✖</i></a>
                    <h2>登陆</h2>
                    <p id="loginMsg" style="color: #6c6c6c"></p>
                    <input type="text" id="loginName" name="username" placeholder="用户名:"
                           value="${reg_name}" required/>
                    <input type="password" id="loginPassword" name="password"
                           placeholder="密码:" required/>
                    <button type="button" id="loginBtn" class="btn_login">登录</button>
                </div>
                <%-- 注册表单 --%>
                <form action="reg.do" method="post">
                    <div class="cont_form_sign_up">
                        <%-- 注册页返回按钮 --%>
                        <a href="javascript:void(0)" onclick="ocultar_login_sign_up()">
                            <i class="material-icons">✖</i></a>
                        <h2>注册</h2>
                        <p id="zcMsg" style="color: #6c6c6c"></p>
                        <input type="text" id="zcName" name="username" placeholder="用户名:" required/>
                        <input type="password" id="zcPassword" name="password" placeholder="密码:" required/>
                        <input type="password" id="rePassword" name="rePassword" placeholder="重复密码:" required/>
                        <input type="text" name="email" placeholder="电话或邮箱:" required/>
                        <input type="text" name="powername" value="客官" hidden/>
                        <button type="submit" class="btn_sign_up">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/loginAndReg/js/index.js"></script>
<%--动态获取友情链接必应图片--%>
<script>
    $(function () {
        // 获取必应图片
        $.ajax({
            type: "GET",
            url: "/biYing.do",
            // data: "",
            dataType: "json",
            async: true,
            success: function (data) {
                $("img").attr("src",data.imgUrl);
            }
        });
    });
</script>

<script>
    /*登陆*/
    $("#loginBtn").click(function () {

        $("#loginMsg").html("");

        var username = $('#loginName').val();
        var password = $('#loginPassword').val();

        if (null == username || username.length == 0) {
            $("#loginMsg").html('请输入用户名或密码');
            return;
        }

        $.ajax({
            type: "POST",
            url: "checkLogin.do",
            data: {"username": username,"password":password},
            dataType: 'text',
            async: false,
            success: function (data) {
                if (data == 0) {
                    top.location='index.jsp';
                } else {
                    $("#loginMsg").html(data);
                }
            }
        });
    });

    /*注册*/
    $("#zcName").blur(function () {
        var value = this.value;
        if (value.length == 0) {
            $("#zcMsg").html('❌用户名不能为空');
        } else {
            $.ajax({
                type: "POST",
                url: "check.do",
                data: {"username": value},
                dataType: 'json',
                async: true,
                success: function (data) {
                    if (data.state == 1) {
                        $("#zcMsg").html('❌该名称已被注册');
                    } else {
                        $("#zcMsg").html('');
                    }
                }
            });
        }
    });

    $('#zcPassword').blur(function () {
        var value = this.value;
        if (value.length == 0) {
            $("#zcMsg").html('❌密码不能为空');
        } else if (value.length < 5) {
            $("#zcMsg").html('❌密码太简单');
        } else {
            $("#zcMsg").html('');
        }
    });
    $('input[name=rePassword]').blur(function () {
        var value1 = this.value;
        var value2 = $('#zcPassword').val();
        if (value1 != value2) {
            $("#zcMsg").html('❌两次密码不一致');
        } else {
            $("#zcMsg").html('');
        }
    });
</script>

<script>
    $(function () {
        var a = ${state == 0};
        if (a) {
            $("#zcName").val("");
            cambiar_login();
        }
    })
</script>
</body>
</html>
